<template>
	<!-- 详情页底部组件 -->
	<view class="bottom-content">
		<view class="bottom-left">
			<image class="header" :src="managerInfo.avatar" mode=""></image>
			<view class="nameinfo">
				<view class="name">
					{{managerInfo.name}}
				</view>
				<view class="name-text">
					{{managerInfo.type === 1 ? '(小鸟)' : '(发布人)'}}
				</view>
			</view>
		</view>
		<view class="bottom-right">
			<view class="callphone" @click="toPhone">
				<uni-icons type="phone-filled" size="18" color="black"></uni-icons>打电话
			</view>
			<view class="Online" @click="toMessage">
				<uni-icons type="chatboxes-filled" size="18" color="white"></uni-icons>在线咨询
			</view>
		</view>
	</view>
</template>

<script>
import {mapState} from 'vuex'
	export default {
		name:"detail-bottom",
    props: {
      managerInfo: {
        type:Object
      }
    },
    computed:{
      ...mapState('m_user',['userInfo'])
    },
		data() {
			return {
				
			};
		},
    methods: {
      toPhone() {
        uni.makePhoneCall({
          phoneNumber:this.managerInfo.mobile
        })
      },
      toMessage() {
        if(this.managerInfo.id === this.userInfo.id) {
          uni.showToast({
            title:'不能和自己联系',
            duration:2000,
            mask:true,
            icon:'error'
          })
          return
        }
        let obj = JSON.stringify(this.managerInfo)
        uni.navigateTo({
          url:'/subpages/message-detail/message-detail?managerInfo=' + obj
        })
      }
      
    }
	}
</script>

<style lang="scss" scoped>
	.bottom-content{
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;
		background: #ffffff;
		.bottom-left{
			margin-left:10rpx ;
			margin-right: 20rpx;
			width: 30%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.header{
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
			.nameinfo{
				display: flex;
				flex-direction: column;
				justify-content: center;
				.name{
					font-size: 35rpx;
					color: #000000;
					font-weight: 400;
				}
				.name-text{
					font-size: 25rpx;
					color:#e4e5e4 ;
				}
			}
		}
		.bottom-right{
			width: 55%;
			padding: 0 30rpx;
			display: flex;
			justify-content: space-between;
			.callphone{
				color: #000000;
				height: 80rpx;
				width: 170rpx;
				border-radius: 10rpx;
				text-align: center;
				line-height: 80rpx;
				background:#fcc448 ;
				image{
					width: 30rpx;
					height:30rpx;
					margin-right: 10rpx;
				}
			}
			.Online{
				color: #ffffff;
				height: 80rpx;
				width: 210rpx;
				border-radius: 10rpx;
				text-align: center;
				line-height: 80rpx;
				background:#fc0c1b ;
				image{
					margin-right: 10rpx;
					width: 30rpx;
					height:30rpx;
				}
			}
		}
	}
</style>